import 'package:color_dart/color_dart.dart';
import 'package:flutter/material.dart';

//无状态组件，根据名称，是个按钮
class TakeOutBtn extends StatelessWidget {
  /// 自提或则外送按钮
  const TakeOutBtn({
    Key key,
  }) : super(key: key);
  //构造函数，传入了key

  //构建页面的展示组件
  @override
  Widget build(BuildContext context) {
    //Container  支持 定位，绘制，尺寸的组件
    return Container(
      //内边距定义
      padding: EdgeInsets.all(3),
      //宽度 90
      width: 90,
      //高度 36
      height: 36,
//decoration可以设置边框、背景色、背景图片、圆角等属性，非常实用。
      decoration: BoxDecoration(
        //设置边框 宽 1   颜色xxx
        border: Border.all(width: 1,color: rgba(136, 175, 213, 1)),
        //设置边角弧度， 18 BorderRadius
        borderRadius: BorderRadius.circular(18)
      ),
      //设置子页面  横向均匀排列的组件 Row
      child: Row(
        // 设置子组件的排列方式 //将主轴空白位置进行均分，排列子元素，手尾没有空隙
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //设置子组件对象数组
        children: <Widget>[
          //盒子组件
          Container(
            //宽 44
            width: 44,
            //搞30
            height: 30,
      // 内部子组件 对齐方式，居中
            alignment: Alignment.center,
            //设置边框样式
            decoration: BoxDecoration(
              //边颜色
              color: rgba(136, 175, 213, 1),
              //边角弧度 15
              borderRadius: BorderRadius.circular(15)
            ),
            //设置子组件 Text  自提  字体样式，颜色，字体大小
            child: Text('自提', style: TextStyle(color: rgba(255, 255, 255, 1),fontSize: 12),)
          ),
          //设置盒子组件
          Container(
            //高度30
            height: 30,
            //边距， 右边 9
            margin: EdgeInsets.only(right: 9),
            //对齐方式  居中
            alignment: Alignment.center,
            //边缘样式，
            decoration: BoxDecoration(
              //边角 15弧度
              borderRadius: BorderRadius.circular(15)
            ),
            //输入子组件，文本， 文本颜色，，文字大小
            child: Text('外送', style: TextStyle(color: rgba(136, 175, 213, 1),fontSize: 12),)
          )
        ],
      ),
    );
  }
}
